<template>
  <div class="chuzhifangan">
    <div class="chuzhifangan-left">
      <div
        :class="['chuzhifangan-tab-item', activeTab.id === item.id ? 'active' : '']"
        v-for="item in tabList"
        :key="item.id"
        @click="handleCheckedTab(item)"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="chuzhifangan-right">
      <div class="chuzhifangan-right-top">
        <div
          :class="['chuzhifangan-tab-item2', activeTab2.id === item.id ? 'active' : '']"
          v-for="item in tab2List"
          :key="item.id"
          @click="handleCheckedTab2(item)"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="chuzhifangan-title">处理意见</div>
      <div class="chuzhifangan-right-card-list">
        <el-card v-for="item in cardList" :key="item.id" shadow="never">
          <div class="chuzhifangan-card-detail">
            <div class="userinfo">
              <el-avatar :size="32" :src="item.avater"></el-avatar>
              <span class="username">{{ item.username }}</span>
            </div>
            <div class="detail-desc">
              <div class="detail-desc-title">{{ item.title }}</div>
              <div class="detail-desc-content">{{ item.content }}</div>
            </div>
            <div class="detail-button" @click="dialogEdit(item)">查看详情</div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      append-to-body
      width="600px"
      title="编辑流转处置意见"
      :visible.sync="dialogValue"
      @close="emitClose"
    >
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="标题" prop="scenarioName">
          <el-input v-model="ruleForm.scenarioName"></el-input>
        </el-form-item>
        <el-form-item label="正文" prop="scenarioDesc">
          <el-input type="textarea" v-model="ruleForm.scenarioDesc"></el-input>
        </el-form-item>
        <el-form-item label="流转目标">
          <el-checkbox-group v-model="ruleForm.teamId">
            <el-checkbox
              v-for="item in participants"
              :label="item.id"
              :key="item.id"
            >{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="附件">
          <UploadFile
            v-if="dialogValue"
            list-type="none"
            :list="ruleForm.scenarioFiles"
            ref="fileRef1"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取 消</el-button>
        <el-button type="primary" @click="emitSave">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      append-to-body
      width="600px"
      title="处置意见详情"
      :visible.sync="dialogValue2"
      @close="emitClose2"
    >
      <el-form ref="formRef2" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="标题：" prop="scenarioName">{{ruleForm.scenarioName}}</el-form-item>
        <el-form-item label="正文：" prop="scenarioDesc">{{ ruleForm.scenarioDesc }}</el-form-item>
        <el-form-item label="附件">
            <div
              style="display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start"
            >
              <el-link
                type="primary"
                 @click="handleDownload(item)"
                 v-for="item in ruleForm.scenarioFiles"
                :key="item.id"
              >
                {{ item.fileName }}
                <i class="el-icon-download"></i>
              </el-link>
            </div>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="emitSave2">流转</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { drillSettingAPI, drillDetailAPI } from "@/api";
import { getUser } from "@/utils";
import { downLoadFile } from '@/utils'
export default {
  props: {
    id: [String, Number], // 想定列表的ID
    drillId: [String, Number], // 演习ID
    wantToBeId: [String, Number], // 想定ID
  },
  computed: {
    ...mapGetters(["userList"]),
  },
  data() {
    return {
      activeTab: {},
      tabList: [],
      activeTab2: {},
      tab2List: [],
      cardList: [],
      // 自建流转详情
      dialogValue: false,
      ruleForm: {
        scenarioName: "",
        scenarioDesc: "",
        scenarioFiles: [],
        teamId: [],
      },
      rules: {},
      participants: [],
      // 编辑流转
      dialogValue2: false,
    };
  },
  async created() {
    // 获取演习设置详情
    drillSettingAPI.read(this.drillId).then((res) => {
      this.participants = (res.participants || []).map((el) => {
        return {
          id: el.teamId,
          name: el.teamName,
        };
      });
      this.tabList = (res.participants || []).map((el, index) => {
        return {
          id: el.teamId,
          name: el.teamName,
          ...el,
          groups: el.groups.map((el2) => {
            return {
              pid: el.teamId,
              id: el2.groupId,
              ...el2,
              name: el2.groupName,
              participantIds: el2.participantIds
                .map((el) => {
                  return this.userList.find((p) => p.id === el.id);
                })
                .filter((el) => el),
            };
          }),
        };
      });
      // 默认第一项
      if (this.tabList.length) {
        this.handleCheckedTab(this.tabList[0]);
      }
    });
  },
  methods: {
    handleCheckedTab(item) {
      this.activeTab = { ...item };
      this.tab2List = item.groups;
      this.tab2List.length && this.handleCheckedTab2(this.tab2List[0]);
    },
    handleCheckedTab2(item) {
      this.activeTab2 = { ...item };
      // 获取处置意见
      drillDetailAPI
        .getHandleOptions({
          maneuverId: this.drillId,
          maneuverScenarioRelaId: this.id,
          teamGroupId: this.activeTab2.groupId,
        })
        .then((res) => {
          if (!res) return (this.cardList = []);
          this.cardList = res.map((el) => {
            return {
              ...el,
              title: el.opinionTitle,
              content: el.opinionContent,
              username: getUser(el.creatorId).name,
            };
          });
        });
    },
    dialogEdit(item) {
      drillDetailAPI.readHandleOptions(item.id).then((res) => {
        this.ruleForm = {
          scenarioName: res.opinionTitle,
          scenarioDesc: res.opinionContent,
          scenarioFiles: res.files,
          teamId: [],
          type: "0",
        };
        this.dialogValue2 = true;
      });
    },
    emitClose() {
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
      this.dialogValue = false;
      this.dialogValue2 = false;
    },
    emitSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("maneuverId", this.drillId);
          formData.append("scenarioName", this.ruleForm.scenarioName);
          formData.append("scenarioDesc", this.ruleForm.scenarioDesc);
          const fileList = this.$refs.fileRef1.getList().addList;
          fileList.forEach((el) => {
            formData.append("scenarioFiles", el);
          });
          formData.append("teamId", this.ruleForm.teamId.join(","));
          formData.append("type", "0");
          drillDetailAPI.updateLiuzhuanOptions(formData).then((res) => {
            this.emitClose();
          });
        }
      });
    },
    emitClose2() {
      this.dialogValue2 = false;
      this.dialogValue = false;
    },
    emitSave2() {
      this.dialogValue = true;
    },
    // 附件下载
    handleDownload(item) {
      downLoadFile(item)
    }
  },
};
</script>

<style lang="less">
@import "~@/assets/css/common.less";
.chuzhifangan {
  width: 100%;
  height: 100%;
  display: flex;
  .chuzhifangan-left {
    padding: 7px 35px 28px 35px;
    width: 220px;
    overflow: auto;
    background-color: #ffffff;
    .chuzhifangan-tab-item {
      margin-top: 21px;
      background-image: url("~@/assets/img/处理方案tab.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 151px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #596278;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      &.active {
        background-image: url("~@/assets/img/处理方案tab_active.png");
        color: @primary;
      }
    }
  }
  .chuzhifangan-right {
    flex-grow: 1;
    padding: 31px 25px;
    background-color: #f9fafc;
    display: flex;
    flex-direction: column;
    .chuzhifangan-right-card-list {
      flex-grow: 1;
      overflow: auto;
    }
    .chuzhifangan-right-top {
      flex-shrink: 0;
      display: flex;
      .chuzhifangan-tab-item2 {
        min-width: 76px;
        height: 32px;
        background: #ffffff;
        border: 1px solid #e6e8f0;
        border-radius: 16px;
        margin-right: 9px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        &.active {
          border-color: @primary;
        }
      }
    }
    .chuzhifangan-title {
      flex-shrink: 0;
      height: 14px;
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      line-height: 14px;
      margin: 29px 0 15px 0;
    }

    .el-card {
      margin-bottom: 11px;
    }
    .chuzhifangan-card-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .userinfo {
        flex-shrink: 0;
        width: 100px;
        margin-right: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .username {
          font-size: 13px;
          font-weight: 500;
          color: #666666;
          line-height: 13px;
          margin-top: 4px;
        }
      }
      .detail-button {
        cursor: pointer;
        flex-shrink: 0;
        width: 90px;
        height: 34px;
        background: rgba(0, 165, 109, 0.1);
        border-radius: 3px;
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        color: @primary;
        font-weight: 500;
      }
      .detail-desc {
        flex-grow: 1;
        padding-right: 134px;
        .detail-desc-title {
          height: 15px;
          font-size: 14px;
          font-weight: bold;
          color: #383838;
          line-height: 15px;
          margin-bottom: 8px;
        }
        .detail-desc-content {
          font-size: 13px;
          font-weight: 400;
          color: #888888;
          line-height: 20px;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
